<template>
  <div class='history'>
     <van-cell-group>
      <van-cell title="搜索历史" style="font-weight:bold">
        <van-icon name="delete-o" style="font-weight:bold" @click.stop="delAll" />
      </van-cell>
      <div v-for="(item,index) in histories" :key="index">
         <van-cell :title="item" @click="$emit('search',item)">
         <van-icon name="close" @click.stop="delOne(item)" />
       </van-cell>
      </div>
     </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'CesuanMSearchHistory',
  created () {

  },
  data () {
    return {
      histories: ['狗', '猫', '仓鼠', '面试']
    }
  },
  methods: {
    delOne (item) {
      const index = this.histories.indexOf(item)
      this.histories.splice(index, 1)
    },
    delAll () {
      this.histories = []
    }
  }
}
</script>

<style lang="less" scoped>
.history{
  /deep/.van-cell__title, .van-cell__value{
    display: flex;
    justify-content: space-between;
  }
  /deep/.van-cell{
    height:150px;
    line-height: 150px;
    font-size: 60px;
  }
  .van-cell__value{
    padding-left:15rem
  }
}
</style>
